<template>
  <div v-loading="loading" class="panel-2" style="position: relative;">
    <div class="title" style="width: 50%;">
      <div>CO<sub>2</sub>浓度<!-- <span class="sub_tit">当前CO<sub>2</sub>浓度：最高88ppm</span> --></div>
    </div>
    <LineChart ref="chart" style="position:absolute; left: 0; top: 0;" />
  </div>
</template>

<script>
import { getCo2 } from '@/api/fjgs/statistic.js'
import LineChart from './LineChart.vue'
import { groupBy } from 'loadsh'
export default {
  components: {
    LineChart
  },
  props: {
    queryParams: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false
    }
  },
  watch: {
    queryParams: {
      handler: 'getData',
      deep: true
    //   immediate: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getCo2(this.queryParams).then(res => {
        const source = {}
        const tunnelIds = []
        // res.data ===>>source
        // [
        //   { "time": "15:00", "右洞二衬": 2145, "左洞二衬": 2451 },
        //   { "time": "16:00", "右洞二衬": 2123.5,"左洞二衬": 2222 }
        // ]
        console.log(res.data)
        res.data.forEach(e => {
          if (!tunnelIds.includes(e.tunnelId)) {
            tunnelIds.push(e.tunnelId)
          }
          if (source[e.time]) {
            source[e.time][e.tunnelId] = e.value
          } else {
            source[e.time] = {
              time: e.time,
              [e.tunnelId]: e.value
            }
          }
        })
        console.log(source, tunnelIds)
        this.$refs.chart.updateChart1({
          dataset: {
            source: Object.values(source)
          },
          series: new Array(tunnelIds.length).fill({
            type: 'line'
            // showSymbol: false
          })
          // [
          //   {
          //     type: 'line',
          //     showSymbol: false
          //   },
          //   // {
          //   //   type: 'line',
          //   //   showSymbol: false
          //   // }
          // ]
        })
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');
</style>
